<template>
  <div class="detail-container">
    <el-button type="primary" icon="el-icon-back" @click="goBack()"
      >返回</el-button
    >
    <el-card class="detail-card">
      <div slot="header" style="text-align: center; font-size: large">
        <span style="text-align: center">{{ form.softwareName }}</span>
      </div>

      <div v-if="false">{{ form.id }}</div>
      <div class="detail-content">
        <el-row :gutter="20">
          <el-col :span="6"
            >编号：<el-tag>{{ form.softwareNum }}</el-tag></el-col
          >
          <el-col :span="6"
            >创建人：<el-tag>{{ form.creatorName }}</el-tag></el-col
          >
          <el-col :span="6"
            >创建时间：<el-date-picker
              v-model="form.created"
              type="date"
              disabled
              style="width: 50%"
            />
          </el-col>
        </el-row>
      </div>
    </el-card>
    <br />
    <el-card class="el-card-margin">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <Basic :id="id" />
        </el-tab-pane>
        <el-tab-pane label="财务信息"><Account :id="id"/></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { software } from "@/api/software.js";
import Basic from "./Basic.vue";
import Account from "./Account.vue";


export default {
  components: { 
    Basic,
    Account,
  },
  data() {
    return {
      form: {
        id: "",
        softwareName: "",
        number: "",
        creatorName: "",
        created: "",
        updated: "",
      },
      id: this.$route.params.id,
    };
  },
  created() {
    this.getBasicSoftware();
  },
  methods: {
    getBasicSoftware() {
      software.findBasic(this.id).then((res) => {
        this.form = res.data;
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped></style>
